<template>
  <div class="echarts-container">
    <div ref="echarts" class="echarts-content"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return { };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // const myChart = echarts.init(this.$refs.echarts,'dark');
      const myChart = echarts.init(this.$refs.echarts);
      const option = {
        title: {
          show: true,
          text: '年龄分布',
          // textStyle:{
          //   color: "blue"
          // },
          left:5,
          top:5
        },
        xAxis: {
          type: 'category',
          data: ['00后', '90后', '80后']
        },
        yAxis: {
          type: 'value',
          scale: true
        },
        legend: {
          data: ['男', '女'],
          // icon:"circle",
        },
        label: {
          show: true,
          position: 'top',
          formatter: (arg) => {
            // console.log(arg)
            return `${arg.value}人`
          }
        },
        tooltip: {
          trigger: 'axis', //不仅仅柱上显示，鼠标只要在柱的坐标轴上 都显示 
          triggerOn: 'mousemove' //鼠标移动到上面显示
          // formatter: (arg) => {
          //   return arg.
          // }
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
            // dataView: {},
            // restore: {},
            // dataZoom: {},
            magicType: {
              type: ['line', 'bar', 'stack']
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: '男',
            data: [110, 200, 270],
            markPoint: {
              data: [
                // {
                //   type: 'max',
                //   name: '最大值'
                // },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            markLine: {
              data: [{
                type:"average",
                name:"平均值"
              }]
            },
            label:{
              show: true,
              rotate: 45 // 指示文字偏转45度
            },
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
            }
          },
          {
            type: 'bar',
            name: '女',
            data: [120, 120, 200],
            barWidth: 20,
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0],
            }
          }
        ]
      }
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
